<template>
	<view class="page">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="listbox">
			<view class="listitem" v-for="(item,index) in goodList" :key="index" @click="goBillDetail(item)">
				<view class="top"><text>订单号：{{item.orderId}}</text> <text class="text-right">{{current==0?'未付款':current==1?'待发货':"已发货"}}</text></view>
				<view class="content">
					<image :src="item.orderAttra"></image>
					<view class="text">
						<view>{{item.orderAttrb}}</view>
						<!-- <view>预约日期： {{item.date[0]}}</view> -->
						<view>{{item.remarks}}</view>
						<!-- <view>￥{{item.reallyPrice}}</view> -->
					</view>
				</view>
				<view class="status">
					<view>￥{{item.reallyPrice}}</view>
					<text v-if="item.payStatus==0" @click.stop="goPay(item)">去支付</text>
					<text v-if="item.payStatus==1" @click.stop="refund(item)">退款</text>
					<text v-if="item.payStatus==4" @click.stop="evaluate(item)">评价</text>
				</view>
			</view>
		</view>	
		
	</view>
</template>

<script setup>
		import {listorderlistbyselectinfo} from '@/common/api.js';
		import {
			onLoad,onShow,
			onReady,
			onShareAppMessage,
			onShareTimeline,onPullDownRefresh
		} from '@dcloudio/uni-app';
	import {
		reactive,
		toRefs,
		ref,
		getCurrentInstance
	} from 'vue';
   const app = getApp();
	const data = reactive({	
		current:0,
		activeColor:'#ea6011',
		week: [],
		same_week: [], 
		same_day: '',
	    month:'',
		items:['未付款','待发货','已发货'],
		goodList:[],
		alertDialog:null,
		alertPayOk:null,
		alertPayWrong :null,
		
		isClick:false
	})
	const {items,current,activeColor,goodList,alertDialog,alertPayOk,alertPayWrong,isClick} = toRefs(data);
	onShow(()=>{
		init();
	})
	onLoad(option => {
		
   

	});
	onReady(() => {
	
	})
	function init(){
		let user= uni.getStorageSync('currUser')
		listorderlistbyselectinfo({dealStatus:current.value+1,userId:user.userid}).then(res=>{
		 goodList.value=res.extend.list
			
		})
	}
	function onClickItem(e){
		current.value = e.currentIndex
		 init()
	} 
	function goPay(item){
		uni.navigateTo({
			url: '/pages/index/recoveryConfirm?id='+item.id+'&type=0',
		})
		// const nowOpenId = uni.getStorageSync('nowOpenId');
		// payForUniApp({orderId:item.id,payType:1,openId:nowOpenId}).then(resp=>{

		// 	if (resp.data.weixinData) {
		// 		 console.log(resp.data.weixinData)
		// 		wePay(resp.data.weixinData,resp.data.orderId)
		// 	} 
		// })
	}
	function goBillDetail(item){
		uni.navigateTo({
			url: `/pages/index/recoveryConfirm?orderId=${item.orderId}`
		})
	}
	function refund(item){
		uni.showModal({
			title: '温馨提示',
			content: `确认要退款吗？`,
			cancelText:'取消',
			confirmText:'确认',
			success: function(res) {
				if (res.confirm) {
					refundOrder({orderId:item.id,payType:item.payType}).then(res=>{
						 uni.showToast({
						 	title: '退款申请成功',
						 	icon: 'none',
						 	duration: 2000
						 })
						  subscribe()
						 init()
					}).catch(err=>{
						uni.showToast({
							title: err.msg,
							icon: 'none',
							duration: 2000
						})
						init()
					})
				} else if (res.cancel) {
					console.log('取消');
				}
			}
		});
	}
	function evaluate(item){
		uni.navigateTo({
			url: '/pages/usercenter/recoveryEvaluate?params='+JSON.stringify(item)
		});
	} 
	// 订阅
	function subscribe() {
		// 场馆预订成功通知 订场取消提醒 订单退款通知
		uni.requestSubscribeMessage({
			tmplIds: ['Gb5XPC453C-QgKbNpgTVSmflP5xGjQ_CfAJ-SjBU_Rg'],
			success: (res) => {
				console.log('success:', res)
			}
		})
	}
</script>
<style scope lang="scss">
page{
	background:#fff;
}	
view{
	box-sizing: border-box;
}
.listbox{
	box-sizing: border-box;
	width:100%;
	padding:30rpx;
	.listitem{
		border-radius: 20rpx;
		margin-bottom:25rpx;
		box-shadow: 0px 2px 5px 2px #ddd;
		.top{
			padding:15rpx 20rpx;
			border-bottom: 1px dotted #d6d6d6;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.text-right{
				color:#666;
			}
		}
		.content{
			padding:15rpx 20rpx;
			display: flex;
			justify-content: flex-start;	
				image{
					width:250rpx;
					height:200rpx;
				}
				
				.text{
					padding-left:20rpx;
					height:200rpx;
					flex:1
				}
			}
			.status{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height:65rpx;
				width:100%;
				text-align: right;
				padding:5rpx 20rpx;
				text{
					color:#fff;
					background: orangered;
					padding:3px 5px;
					border-radius:15px;
				}
			}
	}
}
</style>
